<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>论坛-后台管理</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/css/layui.min.css" integrity="sha512-t1P5rw9SB5InyVvNr7q5WOVGzjoOg3GdtPkSgy8y+k2t/ElrtTq3i+g8mMOKTRyv29L43PtiiLHCWQF1SHjo9w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <style>
    *{box-sizing:border-box;}html{height:100vh;background:url('https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302') no-repeat center center;background-size: cover;}.layui-card{width:400px;border-radius:15px;margin:100px auto 0;padding:30px;background-color:rgba(255,255,255,0.5);}.layui-input{background-color:rgba(255,255,255,0.7);}.layui-form-danger{border-width:1px;border-color:red;}input.layui-form-danger::-webkit-input-placeholder{color:red;}
  </style>
</head>

<body style="background-color: rgba(255,255,255,0);">
<div class="layui-card">
  <div class="layui-card-header" style="text-align: center;font-size: x-large;font-weight: bolder;border-bottom-width:0;">
    论坛-后台管理
  </div>

  <div class="layui-card-body">
    <form class="layui-form" th:action="@{/admin/login}" method="post">

          <div class="layui-form-item layui-input-wrap">
            <div class="layui-input-prefix layui-input-split">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text"
                   name="username"
                   lay-verify="require"
                   placeholder="用户名"
                   lay-reqtext="用户名不能为空"
                   class="layui-input"
                   lay-affix="clear"
                   oninput="value=value.replace(/\s*/g,'')">
          </div>

          <div class="layui-form-item layui-input-wrap">
            <div class="layui-input-prefix layui-input-split">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password"
                   name="password"
                   lay-verify="require"
                   placeholder="密   码"
                   lay-reqtext="密码不能为空"
                   class="layui-input"
                   lay-affix="eye"
                   oninput="value=value.replace(/\s*/g,'')">
          </div>

          <div class="layui-form-item layui-row">
            <div class="layui-col-xs8">
              <div class="layui-input-wrap">
                <div class="layui-input-prefix layui-input-split">
                  <i class="layui-icon layui-icon-vercode"></i>
                </div>
                <input type="text"
                       name="captcha"
                       lay-verify="require"
                       placeholder="验证码"
                       lay-reqtext="验证码不能为空"
                       maxlength="4"
                       class="layui-input"
                       lay-affix="clear"
                       oninput="value=value.replace(/[^A-Za-z0-9]/g,'')">
              </div>
            </div>
            <div  class="layui-col-xs4" style="float: right;">
              <img id="captchaImg" th:src="@{/kaptcha}" th:onclick="|this.src='@{/kaptcha?t=}'+new Date().getTime();|">
            </div>
          </div>

        <div class="layui-form-item">
          <input type="checkbox" name="remember" value="true" lay-skin="primary" title="记住密码">
          <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
        </div>

        <div class="layui-form-item">
          <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
        </div>

    </form>
  </div>
</div>


<!-- layui -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/layui.min.js"></script>

<script>
  const form = layui.form;
  const $ = layui.$;

  layui.use(function(){
    form.verify({
      // 此处以必填项为例
      require: function(value, item){
        if(!value){
          invalid($(item),$(item).attr("lay-reqtext"),false)
          return true;
        }
      }
    });
    form.on('submit(login)', function(data){
        $.ajax({
            url:'/community/admin/login',
            type:'post',
            data:data.field,
            xhrFields: {withCredentials: true},
            success:function (res) {
                res=JSON.parse(res)
                if(res.code===200){
                    let exp = new Date();
                    exp.setTime(new Date().getTime()+res.data.expired*1000)
                    document.cookie = 'ticket=' + res.data.ticket + ";path='/';expires=" + exp.toUTCString();
                    window.location.href = "/community"+res.data.redirect;
                }else{
                    for(let e in res.error){
                        invalid($("input[name='"+e+"']"),res.error[e],true)
                    }
                    $("input[name='captcha']").val("")
                    $("#captchaImg").click()
                }
            }

        });
        return false;
    });
  });
  function invalid(e,m,f){
    e.val("")
    let holder=e.attr("placeholder")
    e.on("keyup",function(){
      e.removeClass("layui-form-danger")
      e.attr("placeholder",holder)
    })
    if(f){e.addClass("layui-form-danger")}
    e.attr("placeholder",m)
  }
</script>
</body>
</html>



